import React, {Component, Fragment} from 'react';
import ButtonConfirmationBox from './ChildrenComponent/ButtonConfirmationBox';
import TimeShow from './ChildrenComponent/TimeShow';
import UpperPartOfTheForm from'./ChildrenComponent/UpperPartOfTheForm';
// import BottomPartOfTheForm from './ChildrenComponent/BottomPartOfTheForm';
import 'antd/dist/antd.css';
import './ShengShuYLQFXHZB.css'
import moment from 'moment';
import $ from 'jquery';
import { Button } from 'antd';

class ShengShuYLQFXHZB extends Component {
    constructor(props){
        super(props);
        this.state={
            riqi: moment().format('YYYY-MM-DD'),
            timeChose:0,//选择的班次 0代表1-7 1代表8-15 2代表16-23
            zhibiao: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],//从数据库获取的标准
            upperData: [{'shuju': []}, {'shuju': []}, {'shuju': []}, {'shuju': []},
            {'shuju': []}, {'shuju': []}, {'shuju': []}, {'shuju': []},
            {'shuju': []}, {'shuju': []}, {'shuju': []}, {'shuju': []},
            {'shuju': []}, {'shuju': []}, {'shuju': []}, {'shuju': []},
            {'shuju': []}, {'shuju': []}, {'shuju': []}, {'shuju': []},
            {'shuju': []}, {'shuju': []}, {'shuju': []}, {'shuju': []},],//表格数据
            person:'',//传入的值班人员

        }
    }

         /**onRef控制子组件提交表单**/
         onRef = (ref) => {
            this.BottomForm = ref;
    };
    
        /**点击提交数据**/
        handleSubmit = () => {
            this.BottomForm.postToHome();
    };
    
    /**
     * 响应班次变化
     **/
    handleTimeChose(x){
        this.setState({
            timeChose:x
        })
    }

    //判定是否已登录，是否有权限
    componentWillMount() {
        fetch('/api/HuaYS/check', {
            method: 'post',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {
                }
                else{
                    this.props.history.push('/index');
                }
            })
            .catch(error => console.error('Error:', error))
    }

    componentDidMount() {
        /**首先查询当前页面是否有历史纪录并赋值**/
        const riqi = this.state.riqi;
        const jsondata = {
            'startRiqi': riqi,
            'startXiaoshi': 0,
            'endRiqi': riqi,
            "endXiaoshi": 23,
            'leixing': 'SSY',
            'zhonglei': 0,
        };
        fetch("/api/HuaYS/query", {
            method: 'POST',
            body: JSON.stringify(jsondata), // data can be `string` or {object}!
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {//判定是否成功
                    let upperData = this.state.upperData;
                    for (let i = 0; i < data['data'].length; i++) {
                        if (data['data'][i]['zhonglei'] === 1 && data['data'][i]['leixing']==='SSY'){ //类型为1是上表数据
                            let shuju = data['data'][i]['shuju'];//取出data中的数据
                            let str = shuju.split(',');//去除数据中的string逗号
                            let a = [];//临时的number数据数组
                            for (let i = 0; i < str.length; i++)//将string转换成number
                                a[i] = parseFloat(str[i]);
                            data['data'][i]['shuju'] = a;//数据数组归还给data
                            const xiaoshi = data['data'][i]['xiaoshi'];//按小时排序把数据传给upperdata
                            upperData[xiaoshi] = data['data'][i];
                        }
                    }           
                    this.setState({//传值给upperData
                        upperData: upperData,
                        person:window.localStorage.name,
                    });
                }
            })
            .catch(error => console.error('Error:', error))
            .then(response => console.log('Success:', response));

        /**从服务器获取指标**/
        const leixing = {'leixing': "SSY"};
        fetch("/api/zhibiao/query", {
            method: 'POST',
            body: JSON.stringify(leixing), // data can be `string` or {object}!
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                    if (data['code'] === 0 && data['zhibiao']['leixing'] === 'SSY') { //判定是否成功
                        let zhi = data['zhibiao']['zhibiao'];//去除指标的逗号
                        const zhibiao = zhi.split(',');
                        let a = [];
                        for (let i = 0; i < zhibiao.length; i++)
                            a[i] = parseFloat(zhibiao[i]);
                        this.setState({
                            zhibiao: a,
                        });
                    }
                }
            )
            .catch(error => console.error('Error:', error))
            .then(response => console.log('Success:', response));
    }

    returnBack = () => {
        this.props.history.push("/index");
    };
    
    render() {
        const standard = [];
        standard[8] = this.state.zhibiao[0];
        standard[10] = this.state.zhibiao[1];
        standard[11] = this.state.zhibiao[2];
        return (
            <Fragment >
                <div  style={{padding: '1%'}}>
                    <h1 align="center">生熟原料全分析汇总表</h1>
                    {/*表单最上的时间及人员显示*/}
                    <TimeShow person={this.state.person} handleTimeChose={this.handleTimeChose.bind(this)}/>
                    <div  style={{
                        border: '2px solid black',
                        margin:'0px 30px 0px 30px'
                    }}>
                        {/*表单部分*/}
                        {/* <h1 align="center">生熟原料全分析汇总表</h1> */}
                        <UpperPartOfTheForm  onRef={this.onRef}
                            standard={standard}
                            timeChose={this.state.timeChose}
                            person={this.state.person}
                            upperData={this.state.upperData}
                            riqi={this.state.riqi}
                            />
                    
                    </div>
                </div>
                <div
                    style={{
                        float:"right",
                        margin:"0px 50px 20px 0px",
                        display:"inline-block"
                    }}
                >
                    <ButtonConfirmationBox type="primary" buttonText="提交" action={this.hadleSubmit}/>
                </div>
            </Fragment>
        );

    }
}

export default ShengShuYLQFXHZB;